<template>
  <div class="page-miH page-bgBack">
    <TableTitle>
      <template slot="title">员工花名册</template>
      <template slot="action">
        <a-badge :count="allCount" :offset="[-16, 0]">
          <a-button type="primary" class="mr12" @click="onTodayAdd">今日新增</a-button>
        </a-badge>
        <a-button icon="plus" type="primary" class="mr12" @click="addMember">添加员工</a-button>
        <a-dropdown>
          <a-menu slot="overlay" @click="handleMenuchange">
            <a-menu-item key="1">批量导入员工</a-menu-item>
            <a-menu-item key="2">批量导入合同</a-menu-item>
          </a-menu>
          <a-button>
            批量导入
            <a-icon type="caret-down" />
          </a-button>
        </a-dropdown>
      </template>
    </TableTitle>
    <a-layout class="p24" style="padding-top: 0">
      <a-spin :spinning="loading" :delay="300">
        <div v-if="isJF" class="mb24" style="display: flex; align-items: center; justify-content: space-between">
          <div
            class="pv16 ph24 box"
            :style="{
              background: selectTypeIndex === 'all' ? 'var(--primary10)' : 'rgba(250, 250, 250, 1)',
              'box-shadow': `inset 0px -4px 0px 0px ${selectTypeIndex === 'all' ? 'var(--primary)' : 'rgba(250, 250, 250, 1)'}`
            }"
            @click="
              () => {
                selectFunc('all');
                columnsT();
                onInitSearch();
              }
            "
          >
            <img src="./images/i1.png" style="width: 32px; height: 32px" />
            <div class="ml12">
              <div style="color: rgba(118, 120, 133, 1); line-height: 14px">在职员工</div>
              <div class="mt8 fs24 fw500" style="color: rgba(85, 86, 93, 1); line-height: 24px">{{ type[0].count }}</div>
            </div>
          </div>
          <div
            class="pv16 ph24 ml24 box"
            :style="{
              background: selectStatus === 1 ? 'var(--primary10)' : 'rgba(250, 250, 250, 1)',
              'box-shadow': `inset 0px -4px 0px 0px ${selectStatus === 1 ? 'var(--primary)' : 'rgba(250, 250, 250, 1)'}`
            }"
            @click="
              () => {
                selectStatusFunc(1);
                onInitSearch();
              }
            "
          >
            <img src="./images/i2.png" style="width: 32px; height: 32px" />
            <div class="ml12">
              <div style="color: rgba(118, 120, 133, 1); line-height: 14px">试用</div>
              <div class="mt8 fs24 fw500" style="color: rgba(85, 86, 93, 1); line-height: 24px">{{ status[0].count }}</div>
            </div>
          </div>
          <div
            class="pv16 ph24 ml24 box"
            :style="{
              background: selectStatus === 2 ? 'var(--primary10)' : 'rgba(250, 250, 250, 1)',
              'box-shadow': `inset 0px -4px 0px 0px ${selectStatus === 2 ? 'var(--primary)' : 'rgba(250, 250, 250, 1)'}`
            }"
            @click="
              () => {
                selectStatusFunc(2);
                onInitSearch();
              }
            "
          >
            <img src="./images/i3.png" style="width: 32px; height: 32px" />
            <div class="ml12">
              <div style="display: flex; align-items: center">
                <span style="color: rgba(118, 120, 133, 1); line-height: 14px; margin-right: 4px">正式</span>
              </div>
              <div class="mt8 fs24 fw500" style="color: rgba(85, 86, 93, 1); line-height: 24px">{{ status[1].count }}</div>
            </div>
          </div>
          <div
            class="pv16 ph24 ml24 box"
            :style="{
              background: selectStatus === 3 ? 'var(--primary10)' : 'rgba(250, 250, 250, 1)',
              'box-shadow': `inset 0px -4px 0px 0px ${selectStatus === 3 ? 'var(--primary)' : 'rgba(250, 250, 250, 1)'}`
            }"
            @click="
              () => {
                selectStatusFunc(3);
                onInitSearch();
              }
            "
          >
            <img src="./images/i4.png" style="width: 32px; height: 32px" />
            <div class="ml12">
              <div style="display: flex; align-items: center">
                <span style="color: rgba(118, 120, 133, 1); line-height: 14px; margin-right: 4px">待入职</span>
              </div>
              <div class="mt8 fs24 fw500" style="color: rgba(85, 86, 93, 1); line-height: 24px">{{ statuss[0].count }}</div>
            </div>
          </div>
          <div
            class="pv16 ph24 ml24 box"
            :style="{
              background: selectStatus === 4 ? 'var(--primary10)' : 'rgba(250, 250, 250, 1)',
              'box-shadow': `inset 0px -4px 0px 0px ${selectStatus === 4 ? 'var(--primary)' : 'rgba(250, 250, 250, 1)'}`
            }"
            @click="
              () => {
                selectStatusFunc(4);
                onInitSearch();
              }
            "
          >
            <img src="./images/i5.png" style="width: 32px; height: 32px" />
            <div class="ml12">
              <div style="display: flex; align-items: center">
                <span style="color: rgba(118, 120, 133, 1); line-height: 14px; margin-right: 4px">已离职</span>
              </div>
              <div class="mt8 fs24 fw500" style="color: rgba(85, 86, 93, 1); line-height: 24px">{{ statuss[1].count }}</div>
            </div>
          </div>
        </div>
        <a-row v-else :gutter="24" style="margin-bottom: 16px">
          <a-col :span="14">
            <a-row class="typeList" type="flex" align="middle">
              <a-col
                style="width: 16%"
                class="typeListDiv"
                v-for="(item, index) in type"
                :key="`${item.value}_${index}`"
                :class="`${selectTypeIndex == item.value ? 'selectType' : ''} ${index == 0 ? 'line' : ''}`"
                :span="4"
                @click="
                  () => {
                    selectFunc(item.value);
                    columnsT();
                    onInitSearch();
                  }
                "
              >
                <div>
                  <div>
                    <h5>{{ item.label }}</h5>
                    <span class="number">{{ item.count }}</span>
                  </div>
                </div>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="5">
            <a-row class="typeList" type="flex" align="middle">
              <a-col
                class="typeListDiv"
                v-for="(item, index) in status"
                :key="`${item.value}_${index}`"
                :class="selectStatus == item.value ? 'selectType' : ''"
                :span="12"
                @click="
                  () => {
                    selectStatusFunc(item.value);
                    onInitSearch();
                  }
                "
              >
                <div>
                  <h5>{{ item.label }}</h5>
                  <span class="number">{{ item.count }}</span>
                </div>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="5">
            <a-row class="typeList" type="flex" align="middle">
              <a-col
                class="typeListDiv"
                v-for="(item, index) in statuss"
                :key="`${item.value}_${index}`"
                :class="selectStatus == item.value ? 'selectType' : ''"
                :span="12"
                @click="
                  () => {
                    selectStatusFunc(item.value);
                    onInitSearch();
                  }
                "
              >
                <div>
                  <h5>{{ item.label }}</h5>
                  <span class="number">{{ item.count }}</span>
                </div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-spin>
      <a-modal v-model="chooseVisible" title="批量导入目的" width="600px" :footer="null">
        <a-button class="chooseBox" @click="chooseOk(1)">
          <div class="choose">
            <div class="chooseTitle">批量导入新员工</div>
            <div class="chooseContent">适用于首次使用花名册新增员工，仅支持导入花名册中没有的员工，仅支持导入在职员工。</div>
          </div>
          <a-icon type="right" />
        </a-button>
        <a-button class="chooseBox" style="margin-top: 18px" @click="chooseOk(2)">
          <div class="choose">
            <div class="chooseTitle">批量修改员工信息</div>
            <div class="chooseContent">适用于批量更新，仅修改花名册已有的员工的信息。</div>
          </div>
          <a-icon type="right" />
        </a-button>
      </a-modal>
      <a-modal :footer="null" :bodyStyle="{ height: '180px' }" v-model="haveResigned" title="数据同步" width="600px">
        <div style="font-size: 16px; font-weight: 500; padding-left: 24px">{{ reasonResigned ? reasonResigned : "--" }}</div>
        <div>
          <div style="margin-top: 12px">
            <span style="font-size: 14px; font-weight: 400; padding-left: 24px; color: #ff0000">*</span>
            若希望信息同步，请前往花名册为其更换用工单位
          </div>
          <div>
            <span style="font-size: 14px; font-weight: 400; padding-left: 24px; color: #ff0000">*</span> 若不需要信息同步，请点击继续添加
          </div>
          <div style="padding-left: 24px" v-if="companyIdResigned && !companyIdResigned.haveAuthority">
            （您没有【{{ companyIdResigned.companyName }}】的访问权限，无法为其更换用工单位）
          </div>
        </div>
        <div class="drawer-footer-box">
          <a-button :disabled="companyIdResigned && !companyIdResigned.canAdd" :style="{ marginRight: '12px' }" @click="handleResigneCancel"
            >继续添加</a-button
          >
          <a-button type="primary" html-type="submit" :disabled="companyIdResigned && !companyIdResigned.haveAuthority" @click="handleOk"
            >前往花名册</a-button
          >
        </div>
      </a-modal>
      <TableBodyNew
        selectHead
        selection
        tableName="empInfoByCompany"
        :selectedRowKeys.sync="selectedRowKeys"
        :selectedHead.sync="selectedHeads"
        :source="data"
        :headerRowID="'sortable_list'"
        :columns="columns"
        :columnsOld="columnsOld"
        :isJF="isJF"
        @onClose="handleCancel"
        @onSearch="handleFormSearch"
        @onReload="onReload"
        @onExport="() => download(1)"
        @onExportAll="() => download(2)"
      >
        <template slot="search">
          <a-input-search v-model="searchForm.nameOrPhoneOrEmail" allow-clear placeholder="姓名/手机号/身份证号" @search="handleChange" />
          <a-range-picker
            label="入职时间"
            format="YYYY-MM-DD"
            allow-clear
            :placeholder="['入职开始日期', '入职结束日期']"
            style="width: 100%"
            v-model="searchForm.joinDateMoment"
          >
            <a-icon slot="suffixIcon" type="clock-circle" />
          </a-range-picker>
          <a-select label="员工排序" allow-clear placeholder="请选择员工排序" style="width: 100%" v-model="gmtOrder">
            <a-select-option v-for="(item, index) in staffSort" :key="index" :value="item.key">{{ item.name }}</a-select-option>
          </a-select>
          <a-select label="员工状态" allow-clear placeholder="请选择员工状态" style="width: 100%" v-model="form.formalType">
            <a-select-option :key="1" :value="1">试用</a-select-option>
            <a-select-option :key="2" :value="2">正式</a-select-option>
          </a-select>
          <a-select label="性别" allow-clear placeholder="请选择员工类型" style="width: 100%" v-model="form.gender">
            <a-select-option :key="1" :value="1">男</a-select-option>
            <a-select-option :key="2" :value="2">女</a-select-option>
          </a-select>
          <a-select label="学历" allow-clear placeholder="请选择学历" style="width: 100%" v-model="form.highestEducation">
            <a-select-option v-for="(item, index) in highestEducation" :key="index" :value="item.label">{{ item.label }}</a-select-option>
          </a-select>
          <a-select label="信息补充" allow-clear placeholder="请选择信息补充" style="width: 100%" v-model="form.isImprove">
            <a-select-option :key="0" :value="0">未完善</a-select-option>
            <a-select-option :key="1" :value="1">已完善</a-select-option>
          </a-select>
          <a-select label="实名认证" allow-clear placeholder="请选择实名认证" style="width: 100%" v-model="form.verified">
            <a-select-option :key="0" :value="0">未认证</a-select-option>
            <a-select-option :key="1" :value="1">已认证</a-select-option>
          </a-select>
          <a-select
            v-if="!isJF"
            label="工作性质"
            allow-clear
            placeholder="请选择工作性质"
            style="width: 100%"
            v-model="form.postType"
            :options="$store.state.enums.postTypeLst"
          />
          <a-select label="政治面貌" allow-clear placeholder="请选择政治面貌" style="width: 100%" v-model="form.politicalStatus">
            <a-select-option v-for="item in politicalStatusOptions" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
          </a-select>
          <a-select label="婚姻状况" allow-clear placeholder="请选择婚姻状况" style="width: 100%" v-model="form.maritalStatus">
            <a-select-option :key="1" :value="1">已婚</a-select-option>
            <a-select-option :key="2" :value="2">未婚</a-select-option>
            <a-select-option :key="3" :value="3">离异</a-select-option>
          </a-select>
          <a-select label="合同签署状态" allow-clear placeholder="请选择合同签署状态" style="width: 100%" v-model="form.contractsStatus">
            <a-select-option :key="0" :value="0">合同未发起</a-select-option>
            <a-select-option :key="1" :value="1">待员工签署</a-select-option>
            <a-select-option :key="2" :value="2">待公司签署</a-select-option>
            <a-select-option :key="3" :value="3">签署完成</a-select-option>
            <a-select-option :key="-1" :value="-1">合同过期未签署</a-select-option>
          </a-select>
          <a-select
            label="标签"
            allow-clear
            placeholder="请选择标签"
            style="width: 100%"
            mode="multiple"
            option-label-prop="label"
            v-model="form.tagTL"
          >
            <a-select-option
              v-for="(item, index) in labelList"
              :key="`${item.tagName}_${index}`"
              :value="item.tagName"
              :label="item.tagName"
              >{{ item.tagName }}</a-select-option
            >
          </a-select>
          <a-select label="渠道" allow-clear placeholder="请选择渠道" style="width: 100%" v-model="form.channelName">
            <a-select-option v-for="item in channelNames" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
          <a-select label="证件类型" style="width: 100%" v-model="form.certificateType" :allow-clear="true" placeholder="请选择证件类型">
            <a-select-option :key="1" :value="1">身份证号</a-select-option>
            <a-select-option :key="2" :value="2">港澳居民往来内地通行证</a-select-option>
            <a-select-option :key="3" :value="3">台湾居民往来大陆通行证</a-select-option>
          </a-select>
          <a-select
            label="签约主体"
            style="width: 100%"
            v-model="form.contractSubject"
            :options="contractSubjectSource"
            :allow-clear="true"
            placeholder="请选择签约主体"
          />
        </template>
        <template slot="search-right">
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item @click="deleteBatchFun">批量删除</a-menu-item>
              <a-menu-item @click="() => changeUnitFun()">批量更换用工单位</a-menu-item>
            </a-menu>
            <a-button>
              <a-icon type="unordered-list" style="line-ver" />
              批量操作
            </a-button>
          </a-dropdown>
        </template>
        <template slot-scope="prop">
          <a-table
            :class="prop.className"
            :components="prop.components"
            :columns="prop.columns"
            :scroll="{ x: prop.scrollWidth }"
            :customHeaderRow="
              () => {
                return {
                  domProps: {
                    id: prop.headerRowID
                  }
                };
              }
            "
            :data-source="data"
            row-key="id"
            tip="加载中..."
            :loading="loading"
            :pagination="pagination"
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange
            }"
            @change="handleTableChange"
          >
            <template slot="leaveDate" slot-scope="text">{{ text != null ? moment(text).format("YYYY-MM-DD") : "" }}</template>
            <template slot="postType" slot-scope="text">{{ text != null ? $store.state.enums.postTypeArr[text - 1] : "" }}</template>
            <template slot="joinDate" slot-scope="text">{{ text != null ? formatDate(text) : "" }}</template>
            <template slot="contractType" slot-scope="text">{{ text != null ? getContractType(text) : "" }}</template>
            <template slot="teaMethods" slot-scope="text">{{ text != null ? getTeaMethod(text) : "" }}</template>
            <template slot="bloodGroup" slot-scope="text">{{ text != null ? getBloodGroup(text) : "" }}</template>
            <template slot="regType" slot-scope="text">{{ text != null ? getRegType(text) : "" }}</template>
            <template slot="politicalStatus" slot-scope="text">{{ text != null ? renderPoliticalStatus(text) : "" }}</template>
            <template slot="birthStatus" slot-scope="text">{{ text != null ? (text === 1 ? "已育" : "未生育") : "" }}</template>
            <template slot="maritalStatus" slot-scope="text">{{ text != null ? getMaritalStatus(text) : "" }}</template>
            <template slot="birthday" slot-scope="text">{{ text != null ? text.split(" ")[0] : "" }}</template>
            <template slot="gender" slot-scope="text">{{ text != null ? (text === 1 ? "男" : "女") : "" }}</template>
            <template slot="contractStartTime" slot-scope="text">{{ text != null ? formatDate(text) : "" }}</template>
            <template slot="contractEndTime" slot-scope="text">{{ text != null ? formatDate(text) : "" }}</template>
            <template slot="formalType" slot-scope="text">{{ text != null ? formalType[Number(text - 1)] : "" }}</template>
            <template slot="contractsStatus" slot-scope="text">{{ text != null ? getConstractsStatusType(Number(text)) : "" }}</template>
            <div slot="isImprove" slot-scope="text, record">
              <div style="cursor: pointer">
                <span v-if="record.isImprove === true" :class="record.isImprove ? 'color2294FF' : 'colorC0C0C0'">•</span>
                <span v-if="record.isImprove === true">已完善</span>
                <a-popover trigger="click" arrowPointAtCenter>
                  <template slot="content">
                    <div style="width: 200px">
                      <span style="color: red">{{ record.needComplete }}</span>
                      <span>信息未完善</span>
                    </div>
                  </template>
                  <span v-if="record.isImprove === false" :class="record.isImprove ? 'color2294FF' : 'colorC0C0C0'">•</span>
                  <span v-if="record.isImprove === false">未完善</span>
                </a-popover>
              </div>
            </div>
            <div slot="verified" slot-scope="text">
              <div>
                <span :class="text ? 'color2294FF' : 'colorC0C0C0'">•</span>
                {{ text ? "已认证" : "未认证" }}
              </div>
            </div>

            <div slot="tag" slot-scope="text">
              <div v-if="text">
                <a-popover placement="topLeft">
                  <template slot="content">
                    <div class="tags-tit">员工标签:</div>
                    <div class="tags-boxs">
                      <p class="tags-item" v-for="(item, index) in text.split(',')" :key="index">{{ item }}</p>
                    </div>
                  </template>
                  <div class="tags">{{ text[0] }}</div>
                  <span v-if="text.length > 1" class="tags-d">...</span>
                </a-popover>
              </div>
            </div>
            <template slot="action" slot-scope="text, record">
              <a @click="detail(record)">详请</a>
              <a-divider type="vertical" v-if="record.status === 4" />
              <a v-if="record.status === 4" @click="restore(record)">恢复在职</a>
            </template>
          </a-table>
        </template>
      </TableBodyNew>
      <a-drawer
        title="添加员工"
        :width="580"
        :destroyOnClose="true"
        :visible="visibleEmpyleeDrawer"
        :wrap-style="{ overflow: 'auto' }"
        @close="onCloseDrawer('visibleEmpyleeDrawer')"
      >
        <a-tabs :activeKey="tabKey" type="card" @change="callback">
          <a-tab-pane key="1" tab="添加员工">
            <div class="emp-title">员工信息</div>
            <DynamicAddEmployees
              @saveValueChange="saveValueChange"
              @cancelForm="cancelForm"
              :outEmpDetail="outEmpDetail"
              :title="title"
              :moduleCode="'onJob'"
            ></DynamicAddEmployees>
          </a-tab-pane>
          <a-tab-pane key="2" tab="添加待入职">
            <div class="emp-title">员工信息</div>
            <DynamicAddEmployees
              @cancelForm="cancelForm"
              @saveValueChange="saveValueChange"
              :title="title"
              :moduleCode="'waitJob'"
            ></DynamicAddEmployees>
          </a-tab-pane>
          <a-tab-pane key="3" tab="扫码入职">
            <a-spin :spinning="loadingcode" :delay="300">
              <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
                <div class="processBox">
                  <div class="processBoxLCJS">流程介绍</div>
                  <div class="maBottom4">1.配置入职登记二维码并分享</div>
                  <div class="maBottom4">2.员工填写并提交入职登记信息</div>
                  <div>3.公司管理员在待入职管理中，完善员工信息并确认入职</div>
                </div>
                <a-form-item class="baseInfo-item" label="二维码有效期">
                  <div style="width: 200px; display: flex; align-items: center; font-size: 12px">
                    <a-input-number allowClear :min="1" v-model="timeDay" style="width: 100%; margin-right: 10px" @change="setAllContent" />
                    <div style="font-weight: 800; font-size: 14px">天</div>
                  </div>
                  <div v-if="timeDay">有效期：{{ FailureTime }}</div>
                </a-form-item>
                <a-form-item v-if="typeValue === 1 && SMMubanList.length > 1" class="baseInfo-item" label="审批模板">
                  <a-select
                    v-model="muban"
                    v-decorator="[
                      'postType',
                      {
                        rules: [{ required: true, message: '请选择审批模板' }]
                      }
                    ]"
                    :default-value="muban"
                    placeholder="请选择审批模板"
                    style="width: 200px"
                    @change="mubanSelect"
                  >
                    <a-select-option v-for="item in SMMubanList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item v-if="!isJF" class="baseInfo-item" label="工作性质">
                  <a-select
                    v-model="SMDefault"
                    v-decorator="[
                      'postType',
                      {
                        rules: [{ required: true, message: '请选择工作性质' }]
                      }
                    ]"
                    :default-value="SMDefault"
                    :options="$store.state.enums.postTypeLst"
                    placeholder="请选择工作性质"
                    style="width: 200px"
                    @change="postTypeSaoMaChange"
                  />
                </a-form-item>
                <a-form-item class="baseInfo-item" label="渠道来源">
                  <a-select
                    v-model="channelDefault"
                    v-decorator="['postType', { rules: [] }]"
                    :default-value="channelDefault"
                    show-search
                    allowClear
                    placeholder="请选择渠道来源"
                    style="width: 200px"
                    @change="channelSaoMaChange"
                  >
                    <a-select-option
                      v-for="(item, index) in siteChannelList"
                      :key="`${item.value}_${index}`"
                      :value="`${item.value}_${item.label}`"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select>
                </a-form-item>

                <a-form-item class="baseInfo-item" label="生成二维码">
                  <div style="width: 100%; display: flex; align-items: center; margin-top: 15px">
                    <img :src="codeimg" style="width: 150px; height: 150px" />
                    <div
                      style="position: absolute; z-index: 100; width: 150px; height: 150px; background-color: #252525aa"
                      v-if="refreshCode"
                      @click="creatCode"
                    >
                      <div
                        style="
                          cursor: pointer;
                          width: 100%;
                          height: 100%;
                          display: flex;
                          flex-flow: column;
                          align-items: center;
                          justify-content: center;
                          cursor: pointer;
                        "
                      >
                        <a-icon type="reload" :style="{ fontSize: '18px', color: '#fff' }" />
                        <span style="color: #ffffff">刷新二维码</span>
                      </div>
                    </div>
                  </div>
                  <div>
                    <xq-icon type="icon-weiwancheng3x" class="primary_color weiwancheng3xCol" />
                    <div class="weiwancheng3xShow">{{ isJF ? "" : "工作性质、" }}渠道来源配置完成后，将成为二维码自带属性，请谨慎分享</div>
                  </div>
                  <div style="margin-top: 20px">
                    <a-button type="primary" @click="downloadCod" :disabled="refreshCode">下载二维码</a-button>
                  </div>
                </a-form-item>
              </a-form>
            </a-spin>
          </a-tab-pane>
        </a-tabs>
      </a-drawer>
      <a-modal title="添加待入职" :visible="isCloseMethod2" width="520px" :destroy-on-close="true" @cancel="handleCancel">
        <template slot="footer">
          <a-button v-if="isApproval" @click="handleCancel">关闭</a-button>
          <a-button v-if="!isApproval" key="submit" type="primary" ghost @click="finishEdit2">继续办理</a-button>
        </template>

        <div style="display: flex; flex-flow: column; align-items: center">
          <img v-if="!isApproval" style="width: 200px; height: 200px" src="@/assets/img/1.png" />
          <img v-else style="width: 200px; height: 200px" src="@/assets/img/2.png" />
          <span style="font-size: 20px; font-weight: 800">{{ !isApproval ? "提交成功" : "审批中" }}</span>
          <span style="color: #00000077; margin-top: 12px; margin-bottom: 12px">{{
            !isApproval ? "可在入职管理中选择确认到岗或者未到岗" : "已提交至审批流程"
          }}</span>
        </div>
      </a-modal>
      <a-modal title="选择审批模板" :visible="selectModel" width="520px" :destroy-on-close="true" @cancel="handleCancel">
        <template slot="footer">
          <a-button @click="handleCancel">取消</a-button>
          <a-button key="submit" type="primary" ghost @click="finishEdit3">下一步</a-button>
        </template>

        <div style="display: flex; flex-flow: column; align-items: center">
          <div
            v-for="(item, i) in templatesListGroup"
            :key="i"
            @click="temClick(item)"
            style="
              padding-top: 10px;
              padding-bottom: 10px;
              padding-right: 15px;
              width: 100%;
              display: flex;
              flex-flow: row;
              align-items: center;
              justify-content: space-between;
            "
            :class="{ backgroundC: item.select }"
          >
            <div style="display: flex; flex-flow: row">
              <img style="width: 52px; height: 52px; margin-right: 15px" src="@/assets/img/模板icon.png" />
              <div>
                <span style="display: flex; flex-flow: column; font-size: 16px; font-weight: 600">{{ item.typeName }}</span>
                <span style="color: #00000077">{{ item.typeDesc }}</span>
              </div>
            </div>
            <xq-icon type="icon-wancheng2" v-if="item.select" class="primary_color f20"></xq-icon>
          </div>
        </div>
      </a-modal>
    </a-layout>
    <ChangeUnit ref="select" @saveOk1="saveOk1"></ChangeUnit>
    <BatchDelete ref="selectBatchDelete" @saveOk1="batchDelete"></BatchDelete>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import {
  loadAllChannelForSiteReq,
  pageOnJobEmpList,
  pageWaitLeave,
  selectEmpInfoPendingRelation,
  getEmpInfoCount,
  saveEmpInfoAndRule,
  selectResigned
} from "@/api/staff/staff";
import { getDepartmentInTree } from "@/api/department/department";
import { getPositionInTree } from "@/api/department/position";
import { formatDate, formatDateDefault, afterTime } from "@/utils/index";
import { isPhone } from "@/utils/validate";
import axios from "axios";
import ChangeUnit from "./component/changeUnit";
import BatchDelete from "./component/batchDelete";
import DynamicAddEmployees from "./info/component/dynamicAddEmployees";
import { columnsOld, politicalStatusOptions, renderPoliticalStatus } from "./employeeFuncs";
import TableBodyNew from "../../../components/Table/tableBodyNew";
const formalType = ["试用", "正式"];

import { reinstatement, creatCode, getQRCodeByCompanyId } from "@/api/staff/staff";
import { getModelList_isUse } from "@/api/billing/billing";
import { listByCompanyIdGet } from "./info/api";
import { mapState } from "vuex";
import { getChannels, getQueryCount } from "@/api/outsourcing/outsourcing";
import request from "@/utils/request";
export default {
  components: {
    ChangeUnit,
    BatchDelete,
    DynamicAddEmployees,
    TableBodyNew
  },
  data() {
    return {
      contractSubjectSource: [],
      siteChannelList: [],
      certificateType: "",
      contractSubject: "",
      title: "新增",
      haveResigned: false,
      reasonResigned: null,
      companyIdResigned: null,
      saveValueFrom: {},
      tempTemplate: undefined,
      templatesListGroup: [],
      loadingcode: false,
      codeimg: "",
      isApproval: true,
      selectModel: false,
      isCloseMethod2: false,
      refreshCode: false,
      timeDay: 7,
      tabKey: "1",
      typeValue: 1,
      isOut: false,
      drag: false,
      show: true,
      show1: true,
      addManFormRef: {
        numList: [],
        leaveList: [],
        hourAmountDouble: null // 劳工
      },
      addManFormRef1: {
        hourAmountDouble1: null, // 劳务费
        changeList: [],
        numList1: [],
        leaveList1: [],
        specialCostDouble: undefined
      },
      rules: {
        specialCostDouble: [{ required: true, message: "请输入", trigger: "change" }]
      },
      checked4: false,
      checked5: false,
      checked6: false,
      ruleShow1: false,
      checked3: false, // 工时抽成
      changeList: [], // 工时抽成数组
      redPackId: "", // 劳务费规则id
      channelId: "", // 渠道id
      salaryCalculateRuleId: "", // 劳工
      labourList: [], // 劳工
      callShow: false, // 劳工
      checked: false, // 劳工
      checked1: false, // 劳工
      ruleShow: false, // 劳工
      option: [
        { label: "月", value: 1 },
        { label: "天", value: 2 },
        { label: "工时", value: 3 }
      ],
      empState: true,
      loading: false,
      searchVisible: false,
      formalType,
      selectedHead: [],
      positionOptions: [],
      headVisible: false,
      tempSelectedHead: [],
      tempNoSelectedHead: [],
      hideVisible: false,
      isPhone,
      ruleTypes: 0,
      cityOption: {
        options: {
          disabled: false,
          clearable: true,
          placeholder: "选择城市",
          defaultValue: ""
        }
      },
      name: "",
      fieldList: [],
      searchForm: {
        nameOrPhoneOrEmail: "",
        joinDateMoment: []
      },
      selectedRowKeys: [],
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      data: [],
      form: {
        formalType: undefined,
        gender: undefined,
        highestEducation: undefined,
        isImprove: undefined,
        verified: undefined,
        postType: undefined,
        politicalStatus: undefined,
        maritalStatus: undefined,
        contractsStatus: undefined,
        tagTL: undefined,
        channelName: undefined,
        certificateType: undefined,
        contractSubject: undefined
      },
      columnsOld,
      columns: [
        {
          title: "操作",
          dataIndex: "action",
          ellipsis: true,
          align: "center",
          fixed: "right",
          scopedSlots: { customRender: "action" },
          width: 150
        }
      ],
      goOutsourcing: false,
      property: "",
      desc: false,
      outEmpDetail: null,
      depInfoOptions: [],
      depInfoOptions2: [],
      selectTypeIndex: "all",
      selectStatus: "",
      visibleEmpyleeDrawer: false,
      // 转正日期
      proRegularDateShow: false,
      // 试用日期
      testDate: false,
      EmpState: null,
      empyleeForm: this.$form.createForm(this),
      // 员工排序
      staffSort: [
        { id: 0, name: "按姓氏排列", key: "namePinyin" },
        { id: 1, name: "按创建时间排列", key: "gmtCreate" },
        { id: 2, name: "按修改时间排列", key: "gmtModified" }
      ],
      gmtOrder: "gmtCreate",
      gmtOrders: undefined,
      // 合同状态
      contractsStatus: [
        { id: 0, name: "合同未发起" },
        { id: 1, name: "待员工签署" },
        { id: 2, name: "待公司签署" },
        { id: 3, name: "签署完成" },
        { id: -1, name: "合同过期未签署" }
      ],
      sonStatus: "",
      isImprove: "",
      verified: "",
      newType: null,
      orders: {
        property: "",
        desc: false
      },
      SMMubanList: [],
      TypeOptions: [
        { value: 0, label: "无试用期" },
        { value: 1, label: "1个月" },
        { value: 2, label: "2个月" },
        { value: 3, label: "3个月" },
        { value: 4, label: "4个月" },
        { value: 5, label: "5个月" },
        { value: 6, label: "6个月及以上" }
      ],
      names: "张强",
      type: [],
      status: [
        { value: 1, label: "试用", name: "countWaitInformalAll", count: 0 },
        { value: 2, label: "正式", name: "countHasInformalAll", count: 0 }
      ],
      statuss: [
        { value: 3, label: "待入职", name: "countPre", count: 0 },
        { value: 4, label: "已离职", name: "countLeaveHas", count: 0 } //,
      ],
      tformalType: "",
      gender: "",
      chooseVisible: false,
      postType: "",
      SMDefault: 5,
      channelDefault: undefined,
      muban: undefined,
      FailureTime: "",
      highestEducation: [
        { value: 1, label: "小学" },
        { value: 2, label: "初中" },
        { value: 3, label: "中专" },
        { value: 4, label: "高中" },
        { value: 5, label: "大专" },
        { value: 6, label: "本科" },
        { value: 7, label: "硕士" },
        { value: 8, label: "博士" },
        { value: 9, label: "其他" }
      ],
      politicalStatusOptions,
      highestE: "",
      tPoliticalStatus: "",
      maritalStatus: [
        { value: 1, label: "已婚" },
        { value: 2, label: "未婚" },
        { value: 3, label: "离异" }
      ],
      tMaritalStatus: "",
      labelList: [],
      channelNames: [],
      channelName: "",
      tagTL: "",
      allCount: 0,
      selectedHeads: [],
      selectedRows: []
    };
  },
  computed: {
    ...mapState(["common", "hr"]),
    ...mapGetters({
      SelectedName: "site/SelectedName",
      isJF: "isJF"
    }),
    cityList() {
      return this.common.cityList;
    },
    areaList() {
      return this.common.areaList;
    },
    companyId() {
      return this.hr.companyId;
    }
  },
  watch: {
    $route: {
      async handler(to, form) {
        await this.initPage();
      },
      immediate: true
    }
  },
  filters: {
    filterType(val) {
      if (val === 1) {
        return "月";
      } else if (val === 2) {
        return "天";
      } else if (val === 3) {
        return "工时";
      } else {
        return "";
      }
    },
    bankPlaceFilter(val) {
      return val;
    }
  },
  async created() {
    this.type = JSON.parse(JSON.stringify(this.$store.state.enums.postTypeStatsInitLst));
    await this.loadContractSubjectSource();
  },
  mounted() {
    const st = this.$route.query.operateFromShortcut;
    if (st) {
      switch (st) {
        case "tianjiayuangong":
          this.addMember();
          this.$nextTick(() => {
            this.callback("1");
          });
          break;
        case "tianjiadairuzhiyuangong":
          this.addMember();
          this.$nextTick(() => {
            this.callback("2");
          });
          break;
        case "saomaruzhi":
          this.addMember();
          this.$nextTick(() => {
            this.callback("3");
          });
          break;
        case "piliangdaoru":
          this.openChoose();
          break;
      }
    }
  },
  methods: {
    async loadContractSubjectSource() {
      await request({
        url: "/admin/api/v1/dictItems/selectAllDictItem?dictCode=1223",
        method: "get"
      })
        .then((res) => {
          this.contractSubjectSource = res.data ? res.data.map((item) => ({ label: item.dictItemKey, value: item.dictItemValue })) : [];
        })
        .catch((err) => {
          console.log("selectAllDictItem", err);
        });
    },
    async initPage() {
      if (this.$route.query.outEmpDetail) {
        this.outEmpDetail = JSON.parse(this.$route.query.outEmpDetail);
        this.outEmpDetail.idCard = this.outEmpDetail.idcard + "";
        if (this.outEmpDetail.joinDate) {
          this.outEmpDetail.joinDate = this.$moment(this.outEmpDetail.joinDate).format("YYYY-MM-DD");
        }
        const token = this.$store.state.auth.token;
        const data1 = this.outEmpDetail;
        Object.keys(data1).map((z) => {
          if (typeof data1[z] === "number" && data1[z].toString().length === 1) {
            data1[z] = data1[z] + "";
          }
          if (typeof data1[z] === "string" && data1[z].indexOf("https://") !== -1) {
            data1[z] = data1[z]
              .split(",")
              .filter((z) => `${z}?token=${token}`)
              .filter((z) => z !== "null" && z !== null);
          }
        });
        this.outEmpDetail = data1;
        this.channelId = this.outEmpDetail.channelId;
      }
      if (this.$route.query.EmpState) {
        this.EmpState = this.$route.query.EmpState;
        this.isOut = true;
      }
      if (this.EmpState === "out") {
        this.visibleEmpyleeDrawer = true;
        this.empState = false;
        setTimeout(() => {
          this.empyleeForm.setFieldsValue({
            name: this.outEmpDetail.name,
            phone: this.outEmpDetail.phone,
            idCard: this.outEmpDetail.idcard,
            remark: this.outEmpDetail.remark,
            postType: 2
          });
        }, 500);
      }
      this.getTabNumber();
      // 不是消息通知，在工作台搜索名字
      if (!this.$route.query.tag) {
        if (this.$route.query.name) {
          this.searchForm.nameOrPhoneOrEmail = this.$route.query.name;
        }
        if (undefined === this.$route.query.index) {
          this.getData();
        } else {
          this.selectFunc(this.type[this.$route.query.index].value);
        }
      }
      getDepartmentInTree({ companyId: this.companyId }).then((res) => {
        this.depInfoOptions = this.tree(res.data[0].depChildList, "depChildList", true);
      });
      getPositionInTree({ companyId: this.companyId }).then((res) => {
        this.positionOptions = this.tree(res.data[0].positionChildList, "positionChildList", true);
      });
      await this.getChannelsList();
      this.getListByCompanyId();
      this.onGetQueryCount();
      if (this.$route.query && this.$route.query.selectId) {
        this.addMember();
      }
      this.loadSiteChannelList();
      // 消息通知
      if (this.$route.query.tag) {
        if (this.$route.query.companyId && this.$route.query.companyName) {
          // 保存用工单位信息
          this.$store.dispatch("onCompanyClick", {
            id: this.$route.query.companyId,
            name: this.$route.query.companyName
          });
        }
        if (this.$route.query.name) {
          this.searchForm.nameOrPhoneOrEmail = this.$route.query.name;
        }
        this.selectStatusFunc(parseInt(this.$route.query.tag)); // 4已离职
        this.$router.replace({ query: {} });
      } else {
        // 检测信息跳转来的信息，是否是同一个用工单位
        if (this.$route.query.companyId && this.$route.query.companyName && this.SelectedName !== this.$route.query.companyName) {
          // 保存用工单位信息
          this.$store.dispatch("onCompanyClick", {
            id: this.$route.query.companyId,
            name: this.$route.query.companyName
          });
        } else {
          if (this.$route.query.tag) {
            this.selectStatusFunc(parseInt(this.$route.query.tag)); // 4已离职
          }
          if (this.$route.query.name) {
            this.searchForm.nameOrPhoneOrEmail = this.$route.query.name;
            this.$router.replace({ query: {} }); // 将消息跳转来的携带查询参数全部清理掉，否则删掉查询信息后，再刷新又会走查询逻辑
          }
        }
      }
    },
    renderPoliticalStatus,
    async loadSiteChannelList() {
      await loadAllChannelForSiteReq()
        .then((res) => {
          if (res.code === 200) {
            this.siteChannelList = res.data ? res.data.map((item) => ({ label: item.name, value: item.id })) : [];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 去重
    removalDuplicate(a, b) {
      const nA = a.slice();
      for (var i = 0; i < b.length; i++) {
        for (var j = 0; j < nA.length; j++) {
          if (nA[j].id === b[i].id) {
            nA.splice(j, 1);
            j = j - 1;
          }
        }
      }
      return nA;
    },
    deleteBatchFun() {
      this.$refs.selectBatchDelete.showModal(this.selectedRows);
    },
    changeUnitFun() {
      this.$refs.select.showModal(this.selectedRows);
    },
    batchDelete() {
      this.getTabNumber();
      this.selectFunc(this.selectTypeIndex);
    },
    saveOk1() {
      this.getTabNumber();
      this.selectFunc(this.selectTypeIndex);
    },
    handleMenuchange(e) {
      switch (e.key) {
        case "1":
          this.openChoose();
          break;
        case "2":
          this.gotoImportFile();
          break;
      }
    },
    openChoose() {
      this.chooseVisible = true;
    },
    chooseOk(e) {
      if (e === 1) {
        this.goto();
      } else if (e === 2) {
        this.$router.push({
          path: "/staff/batchEdit"
        });
        // this.chooseVisible = false;
      }
    },
    cancelForm() {
      this.visibleEmpyleeDrawer = false;
    },
    saveValueChange(data) {
      Object.keys(data).map((z) => {
        if (["joinCityName", "preJoinDep", "preJoinPosition"].includes(z) && Object.prototype.toString.call(data[z]) === "[object Array]") {
          data[z] = data[z].join(",");
        }
        if (
          data[z] instanceof Array &&
          data[z].length !== 0 &&
          z !== "addEmpFieldList" &&
          typeof data[z][0] === "string" &&
          z !== "additionalFieldVOList" &&
          typeof data[z][0] === "string" &&
          data[z][0].indexOf("https://") !== -1
        ) {
          data[z] = data[z] + "";
        }
        if (data[z] instanceof Array && z !== "addEmpFieldList" && z !== "additionalFieldVOList" && data[z].length === 0) {
          data[z] = null;
        }
      });
      this.saveValueFrom = data;
      // 添加员工时查询该手机号或者身份证号是否已经在其他用工单位的已离职列表内
      selectResigned({
        idCard: this.saveValueFrom.idCard ? this.saveValueFrom.idCard : null,
        phone: this.saveValueFrom.phone ? this.saveValueFrom.phone : null,
        companyId: this.companyId
      }).then((res) => {
        if (res.data && res.data.haveResigned) {
          this.haveResigned = true;
          this.reasonResigned = res.data.reason;
          this.companyIdResigned = res.data;
        } else {
          this.handleEmpyleeSubmitPre();
        }
      });
    },
    // 继续添加
    handleResigneCancel() {
      this.haveResigned = false;
      this.handleEmpyleeSubmitPre();
    },
    // 前往花名册
    handleOk() {
      const data = {
        queryType: 1,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        companyId: this.companyIdResigned.companyId,
        "orders[0].property": this.gmtOrder,
        "orders[0].desc": this.gmtOrder !== "namePinyin"
      };
      const data1 = JSON.parse(JSON.stringify(data));
      data1.joinDateMoment = null;
      this.$store.dispatch("onCompanyClick", {
        id: this.companyIdResigned.companyId,
        name: this.companyIdResigned.companyName
      });

      this.$router.push({
        path: "/staff/detail",
        query: {
          companyId: this.companyIdResigned.companyId,
          searchFormData: data1,
          id: this.companyIdResigned.id,
          userId: this.companyIdResigned.userId
        }
      });
      setTimeout(() => {
        this.$router.go(0);
      }, 1000);
    },
    creatCode() {
      const par = {
        companyId: this.companyId,
        status: this.typeValue,
        validDays: this.timeDay,
        postType: this.SMDefault,
        channelId: this.channelDefault ? this.channelDefault.split("_")[0] : "",
        expireDate: this.timeDay ? new Date(this.FailureTime + ":00").getTime() : ""
      };
      if (this.typeValue === 1) {
        // 待入职
        par.flowId = this.muban;
        if (!par.flowId && this.SMMubanList.length > 0) {
          this.$notification["error"]({
            message: "error",
            description: "请选择审批模板"
          });
          return;
        }
      }
      this.loadingcode = true;
      creatCode(par)
        .then((res) => {
          this.loadingcode = false;
          if (res.data) {
            this.typeValue = res.data.status;
            this.codeimg = res.data.qrCodeUrl;
            this.timeDay = res.data.validDays;
            this.SMDefault = res.data.postType;
            const date = new Date(res.data.expireDate); // 时间戳转date
            this.FailureTime = this.moment(date).format("YYYY-MM-DD HH:MM");
            if (res.data.flowId === null) {
              this.muban = undefined;
            } else {
              this.muban = res.data.flowId;
            }

            this.refreshCode = false;
            if (!this.codeimg) {
              this.refreshCode = true;
            }
          } else {
            this.loadingcode = false;
            this.$notification["success"]({
              message: "success",
              description: "二维码创建失败"
            });
          }
        })
        .catch((err) => {
          console.log(err);
          this.loadingcode = false;
        });
    },
    temClick(item) {
      for (var i = 0; i < this.templatesListGroup.length; i++) {
        if (this.templatesListGroup[i].id === item.id) {
          this.templatesListGroup[i].select = true;
          this.tempTemplate = this.templatesListGroup[i].id;
        } else {
          this.templatesListGroup[i].select = false;
        }
      }
    },
    finishEdit2() {
      this.isCloseMethod2 = false;
      this.empyleeForm.resetFields();
      this.visibleEmpyleeDrawer = true;
    },
    finishEdit3() {
      this.handleEmpyleeSubmit();
      this.selectModel = false;
    },
    downloadCod() {
      window.open(this.codeimg + `?token=${this.$store.state.auth.token}`);
    },
    onTypeChange(e) {
      this.typeValue = e.target.value;
      this.refreshCode = true;
    },
    setAllContent(val) {
      this.timeDay = val;
      if (val) {
        var d = new Date();
        const newTime = afterTime(this.moment(d, "YYYY-MM-DD"), this.timeDay);
        this.FailureTime = newTime + " " + d.getHours() + ":" + d.getMinutes();
      }
      this.refreshCode = true;
    },
    callback(key) {
      this.loadingcode = false;
      this.tabKey = key;
      this.empyleeForm.resetFields();

      if (this.tabKey === "3") {
        this.loadingcode = true;
        const d = new Date();
        const newTime = afterTime(this.moment(d, "YYYY-MM-DD"), this.timeDay);
        this.FailureTime = newTime + " " + d.getHours() + ":" + d.getMinutes();
        this.getQRCodeByCompanyIdFun();
      }
    },
    getQRCodeByCompanyIdFun() {
      getQRCodeByCompanyId({ companyId: this.companyId })
        .then((res) => {
          this.loadingcode = false;
          const data = res.data;
          if (data) {
            this.FailureTime = this.moment(data.expireDate).format("YYYY-MM-DD hh:mm");
            this.timeDay = data.validDays;
            if (this.siteChannelList.length > 0) {
              const theOne = this.siteChannelList.find((z) => z.value === data.channelId);
              if (theOne) {
                this.channelDefault = `${data.channelId}_${theOne.label}`;
              }
            }
            this.typeValue = data.status;
            this.SMDefault = data.postType;
            this.muban = data.flowId;
            this.codeimg = data.qrCodeUrl;
          } else {
            this.creatCode();
          }
        })
        .catch((err) => {
          this.loadingcode = false;
          console.log(err);
        });
    },
    // 禁止拖动到id为1的对象
    onMove(e) {
      if (e.relatedContext.element.title === "姓名") return false;
      return true;
    },
    // 开始拖拽事件
    onStart() {
      this.drag = true;
    },
    // 拖拽结束事件
    onEnd() {
      this.drag = false;
    },
    restore(record) {
      reinstatement({
        companyId: this.companyId,
        empId: record.id
      }).then((res) => {
        this.$notification["success"]({
          message: "success",
          description: "恢复成功"
        });
        this.getTabNumber();
        this.selectStatusFunc(4);
      });
    },
    handleEmpyleeSubmitPre(e) {
      if (this.tabKey === "2") {
        // 待入职
        // 请求审批模板
        // 根据公司查询模板
        getModelList_isUse(this.companyId, "OnJob").then((res) => {
          this.templatesListGroup = [];
          for (var i = 0; i < res.data.length; i++) {
            this.templatesListGroup.push({
              id: res.data[i].id,
              select: false,
              typeName: res.data[i].typeName,
              typeDesc: res.data[i].typeDesc
            });
          }
          if (this.templatesListGroup.length > 0) {
            if (this.templatesListGroup.length === 1) {
              // 默认选中第一条
              this.tempTemplate = this.templatesListGroup[0].id;
              this.handleEmpyleeSubmit(e);
            } else {
              for (var k = 0; k < this.templatesListGroup.length; k++) {
                if (k === 0) {
                  this.templatesListGroup[k].select = true;
                } else {
                  this.templatesListGroup[k].select = false;
                }
              }
              // 显示第一条
              this.tempTemplate = this.templatesListGroup[0].id;
              this.selectModel = true;
            }
          } else {
            this.tempTemplate = undefined;
            this.handleEmpyleeSubmit(e);
          }
        });
      } else {
        this.handleEmpyleeSubmit(e);
      }
      this.getData();
    },
    handleEmpyleeSubmit(e) {
      var that = this;
      const values = Object.assign(this.saveValueFrom);
      values.companyId = this.companyId;
      values.employType = 1;
      if (this.tabKey === "1") {
        values.status = 2; // 在职
      } else if (this.tabKey === "2") {
        values.status = 1; // 待入职
        if (this.tempTemplate) {
          values.flowId = this.tempTemplate;
        } else {
          values.flowId = "";
        }
      }
      if (this.outEmpDetail) {
        values.checkInId = this.outEmpDetail.checkInId;
      }
      values.formalType = values.formalType || 2;
      values.postType = values.postType || 5;
      values.joinDate = values.joinDate || formatDateDefault();
      values.preJoinDate = values.joinDate;
      values.probationDays = values.probationDays || 0;
      values.turnStraightDate = values.turnStraightDate || afterTime(values.joinDate, values.probationDays);
      saveEmpInfoAndRule(values, this.tabKey).then((res) => {
        if (values.postType === 2) {
          this.goOutsourcing = true;
          if (this.goOutsourcing === true) {
            this.$router.push({
              path: "/wages/file/outsourcingDetail",
              query: { showType: 1, state: "outsourcing", empId: res.data.id }
            });
          }
        } else {
          that.getData();
          that.getTabNumber();
          this.goOutsourcing = false;
          that.onCloseDrawer("visibleEmpyleeDrawer");
          if (that.selectStatus === 3 || that.selectStatus === 4) {
            that.selectStatusFunc(that.selectStatus);
          }
          if (this.tabKey === "2") {
            // 待入职
            if (this.tempTemplate) {
              this.isApproval = true;
            } else {
              // 添加成功
              this.isApproval = false;
            }
            this.isCloseMethod2 = true;
            this.selectStatusFunc(this.selectStatus);
          } else {
            this.$confirm({
              title: "添加成功",
              okText: "继续添加",
              cancelText: "返回员工列表",
              icon: "check-circle",
              content: (h) => <div style="color:black;">是否继续添加员工？</div>,
              onOk() {
                that.addMember();
              }
            });
          }
        }
      });
    },
    // 清楚所有内容
    clear() {
      // 工价
      this.addManFormRef.hourAmountDouble = "";
      this.checked = false;
      this.checked1 = false;
      this.ruleShow = false;
      this.callShow = false;
      this.isOut = false;
      this.labourList = [];
      this.addManFormRef.numList = [];
      this.addManFormRef.leaveList = [];
      this.salaryCalculateRuleId = "";
      // 劳务费
      this.addManFormRef1.hourAmountDouble1 = "";
      this.channelId = "";
      this.redPackId = "";
      this.addManFormRef1.numList1 = [];
      this.addManFormRef1.leaveList1 = [];
      this.addManFormRef1.changeList = [];
      this.addManFormRef1.specialCostDouble = null;
      this.checked3 = false;
      this.checked4 = false;
      this.checked5 = false;
      this.ruleShow1 = false;
      this.checked6 = false;
      this.channelId = undefined;
    },

    handleCancel() {
      this.empyleeForm.resetFields();
      this.searchVisible = false;
      this.selectModel = false;
      this.isCloseMethod2 = false;
      this.gmtOrders = undefined;
      this.onInitSearch();
      if (undefined === this.$route.query.index) {
        this.getData();
      } else {
        this.selectFunc(this.type[this.$route.query.index].value);
      }
      if (this.selectStatus === 3) {
        this.selectStatusFunc(3);
      } else if (this.selectStatus === 4) {
        this.selectStatusFunc(4);
      }
    },
    handleFormSearch() {
      this.searchVisible = false;
      this.pagination.current = 1;
      const tempForm = JSON.parse(JSON.stringify(this.form));

      if (tempForm.contractsStatus === undefined) {
        this.sonStatus = "";
      } else {
        this.sonStatus = tempForm.contractsStatus;
      }
      if (tempForm.formalType === undefined) {
        this.tformalType = "";
      } else {
        this.tformalType = tempForm.formalType;
      }
      if (tempForm.gender === undefined) {
        this.gender = "";
      } else {
        this.gender = tempForm.gender;
      }
      if (tempForm.postType === undefined) {
        this.postType = "";
      } else {
        this.postType = tempForm.postType;
      }
      if (tempForm.highestEducation === undefined) {
        this.highestE = "";
      } else {
        this.highestE = tempForm.highestEducation;
      }
      if (tempForm.channelName === undefined) {
        this.channelName = "";
      } else {
        this.channelName = tempForm.channelName;
      }

      if (tempForm.politicalStatus === undefined) {
        this.tPoliticalStatus = "";
      } else {
        this.tPoliticalStatus = tempForm.politicalStatus;
      }
      if (tempForm.maritalStatus === undefined) {
        this.tMaritalStatus = "";
      } else {
        this.tMaritalStatus = tempForm.maritalStatus;
      }
      if (tempForm.isImprove === undefined) {
        this.isImprove = "";
      } else {
        this.isImprove = tempForm.isImprove;
      }

      if (tempForm.verified === undefined) {
        this.verified = "";
      } else {
        this.verified = tempForm.verified;
      }
      if (tempForm.tagTL) {
        this.tagTL = tempForm.tagTL.join(",");
      }
      if (tempForm.certificateType) {
        this.certificateType = tempForm.certificateType;
      } else {
        this.certificateType = "";
      }
      if (tempForm.contractSubject) {
        this.contractSubject = tempForm.contractSubject;
      } else {
        this.contractSubject = "";
      }
      if (this.searchForm.joinDateMoment == null || this.searchForm.joinDateMoment.length === 0) {
        this.searchForm.joinDateStart = undefined;
        this.searchForm.joinDateEnd = undefined;
      } else {
        this.searchForm.joinDateStart = this.moment(this.searchForm.joinDateMoment[0]).format("YYYY-MM-DD");
        this.searchForm.joinDateEnd = this.moment(this.searchForm.joinDateMoment[1]).format("YYYY-MM-DD");
      }
      this.pagination.current = 1;
      if (this.gmtOrder === undefined) {
        this.gmtOrder = "gmtCreate";
      }
      if (this.selectStatus === 3) {
        this.selectStatusFunc(3);
      } else if (this.selectStatus === 4) {
        this.selectStatusFunc(4);
      } else {
        this.getData();
      }
    },
    getContractType(contractType) {
      if (contractType === "laborContractLimit") {
        return "固定期限劳动合同";
      } else if (contractType === "laborContractUnlimit") {
        return "无固定期限劳动合同";
      } else if (contractType === "laborContractJobs") {
        return "以完成一定工作任务为期限的劳动合同";
      } else if (contractType === "internAccords") {
        return "实习协议";
      } else if (contractType === "laborContract") {
        return "劳务合同";
      } else if (contractType === "reemployAccords") {
        return "返聘协议";
      } else if (contractType === "laborContractDispatch") {
        return "劳务派遣合同";
      } else if (contractType === "borrowedContract") {
        return "借调合同";
      } else if (contractType === "engagementLetter") {
        return "约定书";
      } else if (contractType === "partTime") {
        return "兼职合同";
      } else if (contractType === "noviciateAgreement") {
        return "见习协议";
      } else if (contractType === "dimissionContract") {
        return "离职合同";
      } else if (contractType === "retireReEmploy") {
        return "退休返聘合同";
      } else if (contractType === "other") {
        return "其它";
      }
    },
    getTeaMethod(teaMethods) {
      if (teaMethods === "1") {
        return "全日制";
      } else if (teaMethods === "2") {
        return "成人教育";
      } else if (teaMethods === "3") {
        return "远程教育";
      } else if (teaMethods === "4") {
        return "自学考试";
      } else if (teaMethods === "5") {
        return "其他非全日制";
      }
    },
    getBloodGroup(bloodGroup) {
      if (bloodGroup === 1) {
        return "A";
      } else if (bloodGroup === 2) {
        return "B";
      } else if (bloodGroup === 3) {
        return "AB";
      } else if (bloodGroup === 4) {
        return "O";
      } else if (bloodGroup === 5) {
        return "其它";
      }
    },
    getRegType(regType) {
      if (regType === 1) {
        return "城镇户口";
      } else if (regType === 2) {
        return "农村户口";
      } else if (regType === 3) {
        return "居民户口";
      }
    },
    getMaritalStatus(maritalStatus) {
      if (maritalStatus === 1) {
        return "已婚";
      } else if (maritalStatus === 2) {
        return "未婚";
      } else if (maritalStatus === 3) {
        return "离异";
      }
    },
    formatDate(text) {
      return formatDate(text);
    },
    getConstractsStatusType(text) {
      return text + "" === "-1" ? "合同过期未签署" : this.contractsStatus[text].name;
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRows = selectedRows;
      this.selectedRowKeys = selectedRowKeys;
    },
    // 导出员工信息excel表
    download(i) {
      const token = this.$store.state.auth.token;
      let params = {};

      if (i === 2) {
        params = {
          companyId: this.companyId,
          exportColumns: this.isJF ? this.selectedHeads.filter((item) => item.dataIndex !== "postType") : this.selectedHeads,
          status: this.selectStatus === 4 ? "4" : this.selectStatus === 3 ? "1" : null,
          channelId: this.form.channelName ? this.form.channelName : null,
          tag: this.form.tagTL ? this.form.tagTL + "" : null,
          nameOrPhoneOrIdCard: this.searchForm.nameOrPhoneOrEmail ? this.searchForm.nameOrPhoneOrEmail : null,
          ...this.form,
          ...this.searchForm,
          empBySiteQuery: {
            ...this.form
          }
        };
      } else {
        params = {
          companyId: this.companyId,
          idList: this.selectedRowKeys,
          exportColumns: this.isJF ? this.selectedHeads.filter((item) => item.dataIndex !== "postType") : this.selectedHeads,
          status: this.selectStatus === 4 ? "4" : this.selectStatus === 3 ? "1" : null,
          channelId: this.form.channelName ? this.form.channelName : null,
          tag: this.form.tagTL ? this.form.tagTL + "" : null,
          nameOrPhoneOrIdCard: this.searchForm.nameOrPhoneOrEmail ? this.searchForm.nameOrPhoneOrEmail : null,
          ...this.form,
          ...this.searchForm,
          empBySiteQuery: {}
        };
      }
      axios({
        url: `/hr/api/v1/empInfos/export`,
        data: params,
        method: "post",
        responseType: "blob",
        headers: {
          token: token,
          "Content-Type": "application/json"
        }
      })
        .then((res) => {
          const link = document.createElement("a");
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", `${this.$store.state.hr.companyName}_` + "员工导出记录" + ".xlsx");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      if (!this.selectTypeIndex && this.selectTypeIndex !== 0) {
        this.selectStatusFunc(this.selectStatus, this.pagination.current);
      } else {
        this.getData();
      }
    },
    selectFunc(tag) {
      this.pagination.current = 1;
      this.selectTypeIndex = tag;
      this.selectStatus = null;
      this.searchForm.postType = tag === "all" ? undefined : tag;
      this.searchForm.formalType = undefined;
      this.searchForm.status = undefined;
      this.selectedRowKeys = [];
      this.getData();
    },
    getMoment(date) {
      return date ? this.moment(date) : null;
    },
    columnsT(v) {
      const tit = this.columnsOld[this.columnsOld.length - 2].title;
      const leaveDateJson = {
        title: "离职时间",
        dataIndex: "leaveDate",
        ellipsis: true,
        colDefault: true,
        scopedSlots: { customRender: "leaveDate" },
        width: 150
      };
      const leaveReasonJson = {
        title: "离职原因",
        dataIndex: "leaveReason",
        ellipsis: true,
        colDefault: true,
        scopedSlots: { customRender: "leaveReason" },
        width: 150
      };
      if (tit === "离职时间" || tit === "离职原因") {
        this.columnsOld.splice(this.columnsOld.length - 3, 2);
      } else {
        if (v) this.columnsOld.splice(this.columnsOld.length - 1, 0, leaveDateJson, leaveReasonJson);
      }
    },
    selectStatusFunc(tag, current) {
      if (tag === 4) {
        this.columnsT(true);
      } else {
        this.columnsT();
      }
      this.loading = true;
      this.pagination.current = current || 1;
      this.selectStatus = tag;
      this.searchForm.postType = undefined;
      this.selectTypeIndex = null;
      if (tag === 1) {
        this.searchForm.formalType = 1;
        this.searchForm.status = undefined;
        pageOnJobEmpList({
          companyId: this.companyId,
          ...this.form,
          ...this.searchForm,
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize
        })
          .then((res) => {
            if (res.data && res.data.entityCount) {
              this.pagination.total = res.data && res.data.entityCount;
            } else {
              this.pagination.total = 0;
            }
            if (res.data && res.data.entities && res.data.entities.length > 0) {
              res.data.entities.forEach((element) => {
                if (element.data) {
                  for (const key in element.data) {
                    element[key] = element.data[key];
                  }
                }
                if (element.bankPlace) {
                  const values = this.buildValue(this.getLastAreaId(element.bankPlace));
                  const labels = values.map((item) => item.label);
                  element.bankPlace = labels.join("-");
                }
                if (element.customFields) {
                  for (var key in element.customFields) {
                    element[key] = element.customFields[key];
                  }
                }
              });
            }

            this.data = (res.data && res.data.entities) || [];
          })
          .finally(() => {
            this.loading = false;
          });
      } else if (tag === 2) {
        this.searchForm.formalType = 2;
        this.searchForm.status = undefined;
        pageOnJobEmpList({
          companyId: this.companyId,
          ...this.form,
          ...this.searchForm,
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize
        })
          .then((res) => {
            if (res.data && res.data.entityCount) {
              this.pagination.total = res.data && res.data.entityCount;
            } else {
              this.pagination.total = 0;
            }
            if (res.data && res.data.entities && res.data.entities.length > 0) {
              res.data.entities.forEach((element) => {
                if (element.data) {
                  for (const key in element.data) {
                    element[key] = element.data[key];
                  }
                }
                if (element.bankPlace) {
                  const values = this.buildValue(this.getLastAreaId(element.bankPlace));
                  const labels = values.map((item) => item.label);
                  element.bankPlace = labels.join("-");
                }
                if (element.customFields) {
                  for (var key in element.customFields) {
                    element[key] = element.customFields[key];
                  }
                }
              });
            }
            this.data = (res.data && res.data.entities) || [];
          })
          .finally(() => {
            this.loading = false;
          });
      } else if (tag === 3) {
        this.searchForm.status = 1;
        this.searchForm.formalType = undefined;
        selectEmpInfoPendingRelation({
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize,
          companyId: this.companyId,
          ...this.searchForm,
          ...this.form,
          tag: this.form.tagTL ? this.form.tagTL : null
        })
          .then((res) => {
            if (res.data && res.data.entityCount) {
              this.pagination.total = res.data && res.data.entityCount;
            } else {
              this.pagination.total = 0;
            }
            if (res.data && res.data.entities && res.data.entities.length > 0) {
              res.data.entities.forEach((element) => {
                if (element.data) {
                  for (const key in element.data) {
                    element[key] = element.data[key];
                  }
                }
                if (element.bankPlace) {
                  const values = this.buildValue(this.getLastAreaId(element.bankPlace));
                  const labels = values.map((item) => item.label);
                  element.bankPlace = labels.join("-");
                }
              });
            }
            this.data = (res.data && res.data.entities) || [];
          })
          .finally(() => {
            this.loading = false;
          });
      } else if (tag === 4) {
        this.searchForm.formalType = undefined;
        this.searchForm.status = 4;
        pageWaitLeave({
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize,
          companyId: this.companyId,
          ...this.searchForm,
          ...this.form,
          tag: this.form.tagTL ? this.form.tagTL : null
        })
          .then((res) => {
            if (res.data && res.data.entityCount) {
              this.pagination.total = res.data && res.data.entityCount;
            } else {
              this.pagination.total = 0;
            }
            if (res.data && res.data.entities && res.data.entities.length > 0) {
              res.data.entities.forEach((element) => {
                if (element.data) {
                  for (const key in element.data) {
                    element[key] = element.data[key];
                  }
                }
                if (element.bankPlace) {
                  const values = this.buildValue(this.getLastAreaId(element.bankPlace));
                  const labels = values.map((item) => item.label);
                  element.bankPlace = labels.join("-");
                }
              });
            }
            this.data = (res.data && res.data.entities) || [];
          })
          .finally(() => {
            this.loading = false;
          });
      } else {
        this.data = [];
      }
    },
    handleChange(e) {
      this.pagination.current = 1;
      if (this.selectStatus) {
        this.selectStatusFunc(this.selectStatus);
      } else {
        this.getData();
      }
    },
    getTabNumber() {
      getEmpInfoCount(this.companyId).then((res) => {
        const data = res.data;
        this.type.forEach((item, index) => {
          this.$set(this.type, index, {
            ...this.type[index],
            count: data[this.type[index].name]
          });
        });
        this.status.forEach((item, index) => {
          this.$set(this.status, index, {
            ...this.status[index],
            count: data[this.status[index].name]
          });
        });
        this.statuss.forEach((item, index) => {
          this.$set(this.statuss, index, {
            ...this.statuss[index],
            count: data[this.statuss[index].name]
          });
        });
      });
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    getData(id) {
      this.orders.property = this.gmtOrder;
      const data = {
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        companyId: this.companyId,
        ...this.searchForm,
        "orders[0].property": this.gmtOrder,
        "orders[0].desc": this.gmtOrder !== "namePinyin"
      };
      if (this.sonStatus !== "") {
        data.contractsStatus = this.sonStatus;
      }
      if (this.tformalType !== "") {
        data.formalType = this.tformalType;
      }
      if (this.gender !== "") {
        data.gender = this.gender;
      }
      if (this.postType !== "") {
        data.postType = this.postType;
      }
      if (this.highestE !== "") {
        data.highestEducation = this.highestE;
      }

      if (this.channelName !== "") {
        data.channelId = this.channelName;
      }
      if (this.tPoliticalStatus !== "") {
        data.politicalStatus = this.tPoliticalStatus;
      }
      if (this.tMaritalStatus !== "") {
        data.maritalStatus = this.tMaritalStatus;
      }
      if (this.isImprove !== "") {
        data.isImprove = this.isImprove;
      }
      if (this.verified !== "") {
        data.verified = this.verified;
      }
      if (this.tagTL !== "") {
        data.tag = this.tagTL;
      }
      if (this.certificateType !== "") {
        data.certificateType = this.certificateType;
      }
      if (this.contractSubject !== "") {
        data.contractSubject = this.contractSubject;
      }
      this.loading = true;
      pageOnJobEmpList(data)
        .then((res) => {
          if (res.data && res.data.entityCount) {
            this.pagination.total = res.data && res.data.entityCount;
          } else {
            this.pagination.total = 0;
          }
          if (res.data && res.data.entities) {
            res.data.entities.map((item) => {
              if (item.isImprove == null) {
                item.isImprove = false;
              }
            });
          }
          if (res.data && res.data.entities && res.data.entities.length > 0) {
            res.data.entities.forEach((element) => {
              if (element.data) {
                for (const key in element.data) {
                  element[key] = element.data[key];
                }
              }
              if (element.bankPlace) {
                const values = this.buildValue(this.getLastAreaId(element.bankPlace));
                const labels = values.map((item) => item.label);
                element.bankPlace = labels.join("-");
              }
              if (element.customFields) {
                for (var key in element.customFields) {
                  element[key] = element.customFields[key];
                }
              }
            });
          }
          this.data = (res.data && res.data.entities) || [];
        })
        .finally(() => {
          this.loading = false;
        });
      this.onGetQueryCount();
    },
    getLastAreaId(values) {
      if (Array.isArray(values)) {
        return values[values.length - 1];
      } else {
        return values.split(",").slice(-1)[0];
      }
    },
    buildValue(id, needRecursion = true) {
      id = parseInt(id);
      const index = this.common.areaSourceList.findIndex((item) => item.id === parseInt(id));
      if (index > -1) {
        const item = this.common.areaSourceList[index];
        const val = {
          value: id,
          label: item.name
        };
        if (needRecursion && item.parentId > 0) {
          return this.buildValue(item.parentId).concat([val]);
        } else {
          return [val];
        }
      }
      return [];
    },
    detail(row) {
      const data = {
        queryType: 1,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        companyId: this.companyId,
        ...this.searchForm,
        "orders[0].property": this.gmtOrder,
        "orders[0].desc": this.gmtOrder !== "namePinyin"
      };
      const data1 = JSON.parse(JSON.stringify(data));
      data1.joinDateMoment = null;
      this.$router.push({
        path: "/staff/detail",
        query: {
          searchFormData: data1,
          id: row.id,
          userId: row.userId
        }
      });
    },
    goto() {
      this.$router.push({
        path: "/staff/upload"
      });
    },
    gotoImportFile() {
      this.$router.push({
        path: "/staff/uploadFile"
      });
    },
    onCloseDrawer(tag) {
      this[tag] = false;
    },
    addMember() {
      this.proRegularDateShow = false;
      this.testDate = false;
      this.empyleeForm.resetFields();
      this.visibleEmpyleeDrawer = true;
      this.clear();
      // 请求二维码审核模板
      getModelList_isUse(this.companyId, "OnJob").then((res) => {
        this.SMMubanList = [];
        for (var i = 0; i < res.data.length; i++) {
          this.SMMubanList.push({
            value: res.data[i].id,
            label: res.data[i].typeName
          });
        }
        if (this.SMMubanList.length > 0) {
          // 默认选中第一条
          this.muban = this.SMMubanList[0].value;
        } else {
          this.muban = undefined;
        }
      });
    },
    postTypeSaoMaChange(value) {
      this.SMDefault = value;
      this.refreshCode = true;
    },
    channelSaoMaChange(value) {
      this.channelDefault = value;
      this.refreshCode = true;
    },
    mubanSelect(value) {
      this.muban = value;
      this.refreshCode = true;
    },
    tree(array, childKey, onlyLastChild) {
      if (array === null || array.length < 1) {
        return [];
      }
      array.map((item, index) => {
        item["value"] = item.id;
        item["key"] = item.id;
        item["label"] = item.name;
        item["children"] = item[childKey];

        if (item.leave !== 3) {
          item["disabled"] = onlyLastChild;
        }

        if (item.children) {
          // item["disabled"] = onlyLastChild
          this.tree1(item.children, childKey, onlyLastChild);
        }
      });
      return array;
    },
    tree1(array, childKey, onlyLastChild) {
      if (array === null || array.length < 1) {
        return [];
      }
      array.map((item, index) => {
        item["value"] = item.id;
        item["key"] = item.id;
        item["label"] = item.name;
        item["children"] = item[childKey];

        if (item.children) {
          // item["disabled"] = onlyLastChild
          this.tree1(item.children, childKey, onlyLastChild);
        }
      });
      return array;
    },
    getListByCompanyId() {
      listByCompanyIdGet({ companyId: this.companyId })
        .then(({ data }) => {
          this.labelList = data;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    getChannelsList() {
      getChannels({
        pageNo: 1,
        pageSize: 1000
      }).then((res) => {
        this.channelNames = res.data.entities;
      });
    },
    onTodayAdd() {
      this.$router.push({
        name: "staff/employee/todayAdd"
      });
    },
    async onGetQueryCount() {
      await getQueryCount({
        date: this.moment().format("YYYY-MM-DD HH:mm:ss"),
        status: 1,
        companyId: this.companyId
      })
        .then((res) => {
          if (res.data) {
            this.allCount = res.data.allCount;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onReload() {
      this.selectStatus === 3 || this.selectStatus === 4 ? this.selectStatusFunc(this.selectStatus) : this.getData();
      this.getTabNumber();
    },
    onInitSearch() {
      this.gmtOrder = "gmtCreate";
      this.sonStatus = "";
      this.tformalType = "";
      this.gender = "";
      this.postType = "";
      this.highestE = "";
      this.channelName = "";
      this.tPoliticalStatus = "";
      this.tMaritalStatus = "";
      this.isImprove = "";
      this.verified = "";
      this.tag = "";
      this.tagTL = "";
      this.certificateType = "";
      this.contractSubject = "";
      this.searchForm.joinDateMoment = [];
      this.searchForm.joinDateStart = "";
      this.searchForm.joinDateEnd = "";
      this.form.formalType = undefined;
      this.form.gender = undefined;
      this.form.highestEducation = undefined;
      this.form.isImprove = undefined;
      this.form.verified = undefined;
      this.form.postType = undefined;
      this.form.politicalStatus = undefined;
      this.form.maritalStatus = undefined;
      this.form.contractsStatus = undefined;
      this.form.tagTL = undefined;
      this.form.channelName = undefined;
      this.form.certificateType = undefined;
      this.form.contractSubject = undefined;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "./styles/employee.scss";
.box {
  flex: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
}
</style>
